﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ECharts</title>
    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
</head>
<body style="margin:0 0 0 0">
    <div id="charts" style="width:99%;height:262px;"></div>
    <script src="~/Scripts/echarts.min.js"></script>
    <script type="text/javascript">
        var CoalStructure=@Html.Raw(ViewBag.CoalStructure)
    </script>
    <script type="text/javascript">
        option = {
            color: ['#87cefa', '#ff7f50'],
            xAxis: {
                type: 'category',
                data: @Html.Raw(ViewBag.Day)
                },
            grid:{
                x: 60,
                y: 25,
                x2: 5,
                y2: 25,
            },
            tooltip:{
                formatter:function (params){
                    var res = params.name+'<br/>'; 
                    for(var idx=0; idx< CoalStructure.length; idx++){
                        if(params.name==CoalStructure[idx].COALYARD_NAME){
                            var cs=CoalStructure[idx];
                            res+="存煤总量:"+cs.TOTAL+"<br/>";
                            res+="水分:"+cs.MT+"<br/>";
                            res+="灰分:"+cs.AAR+"<br/>";
                            res+="挥发分:"+cs.VAR+"<br/>";
                            res+="全硫:"+cs.STD+"<br/>";
                            res+="发热量(MJ/kg):"+cs.QNETAR_MJ+"<br/>";
                            res+="发热量(kacl/kg):"+cs.QNETAR_KACL+"<br/>";
                        }
                    }
                    return res;
                }
            },
            toolbox: {
                feature: {
                    magicType:{show:true,type:['line','bar']},
                    saveAsImage: {}
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: @Html.Raw(ViewBag.Total),
                type: 'bar'
            }]
        };

        $(function () {
            var myChart = echarts.init(document.getElementById('charts'));
            myChart.setOption(option, true);
        })
    </script>
</body>
</html>
